<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1798038_vix4f9bz06q.css">
    <style>
        #over{width: 380px;height:40px;background-color: red;display:flex;}
        #over-one{text-align: center;line-height:40px;width: 45px;height:40px;}
        #over-two{width: 270px;height:30px;background-color: #fff;margin-top:5px;border-radius: 45px;border:none;outline:none;}
        #over-two-o{width: 30px;height:30px;line-height:30px;margin-left: 10px;color:red;font-weight: bold;}
        #over-two-one{width: 25px;height:30px;line-height:30px;margin-left: 5px;}
        #over-two-two{float: right;margin-top:1px;margin-right:10px;width: 195px;height:25px;border:none;outline:none;font-size:14px;}
        #over-three{background-color: red;border:none;font-size: 16px;width: 65px;height:40px;text-align: center;line-height:40px;color:#fff;outline:none;}
        .icon-gengduo{color:#fff;}
    </style>
</head>
<body>
    <div id="app">
        <nav-bar>
            
        </nav-bar>
    </div>
    <template id="cpnw">

            <div id="over">
                <div id="over-one">
                    <i class="iconfont icon-gengduo"></i>
                </div>
                <div id="over-two">
                    <label id="over-two-o">JD</label>
                    <label id="over-two-one"><i class="iconfont icon-sousuo"></i></label>
                    <input id="over-two-two" type="text" placeholder="请输入搜索内容"/>
                </div>       
                <button id="over-three">登录</button>
            </div>

        
    </template>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
        let navBar = {
            template:'#cpnw'
        }
        new Vue({
            el:'#app',
            data:{

            },
            components: {
                navBar
            }
        })

    </script>
</body>
</html>